<template>
  <div class="tab-container">
    <!-- 选项卡按钮，点击时改变选中的 tab -->
    <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="handleTabClick(index)"
        :class="{ active: activeTab === index }"
    >
      {{ tab }}
    </button>
  </div>

  <div class="approval-list-container">
    <div v-if="todoList.length === 0" class="no-data">
      暂无已办事项
    </div>
    <div v-for="item in todoList" class="approval-item">
      <div class="item-header">
        <span v-if="item.state === 1">
<!--          <img src="../../public/pass.png" style="width: 20px;height: 20px">-->
          <span class="pass">通过</span>
        </span>
        <span v-if="item.state === 2">
<!--          <img src="../../public/nopass.png" style="width: 20px;height: 20px">-->
          <span class="nopass">未通过</span>
        </span>

        <span style="font-style: italic">{{ item.formName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDiffFormByUserIdAndState,
    getStateFormOfNotTodoByUserId
} from "@/js/UserForm.js";
import { getCurrentUser } from '../js/login';
export default {
  data() {
    return {
      tabs: ['全部', '通过', '未通过'], // 选项卡标题数组
      activeTab: 0, // 默认选中第一个,
      todoList: [],
      currentUser: null
    }
  },
mounted() {
  this.getNotTodoList();
},
  methods:{
    handleTabClick(index) {
      this.activeTab = index;
      console.log("触发了",index)
      if (index === 0) {
        this.getNotTodoList();
        // this.fetchTodoList(index);
      } else if (index === 1) {
        this.fetchTodoList(index);
      } else if (index === 2) {
        this.fetchTodoList(index);
      }
    },
    fetchTodoList(index) {
      this.currentUser = getCurrentUser();
      console.log('当前用户:', this.currentUser)
      if (this.currentUser && this.currentUser.user.userId) {
        getDiffFormByUserIdAndState(this.currentUser.user.userId,index)
            //获取不到数据
            .then(response => {
              console.log("response.data:",response.data)
              if (response.data) {
                this.todoList = response.data|| [];
              } else {
                console.error('获取'+tabs[index]+'列表失败:', response.data.msg);
              }
            })
            .catch(error => {
              console.error('获取'+tabs[index]+'列表出错:', error);
            });
      } else {
        console.error('未获取到当前用户信息');
      }
    },
    getNotTodoList() {
      this.currentUser = getCurrentUser();
      console.log('当前用户:', this.currentUser)
      if (this.currentUser && this.currentUser.user.userId) {
        getStateFormOfNotTodoByUserId(this.currentUser.user.userId)
            //获取不到数据
            .then(response => {
              console.log("response.data:",response.data)
              if (response.data) {
                this.todoList = response.data|| [];
              } else {
                console.error('获取全部列表失败:', response.data.msg);
              }
            })
            .catch(error => {
              console.error('获取全部列表出错:', error);
            });
      } else {
        console.error('未获取到当前用户信息');
      }
    }
  }
}
</script>

<style scoped>
.tab-container {
  width: 97%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 6px;
}
.tab-container > button {
  font-size: 15px;
  flex: 1;
  padding: 12px 20px;
  cursor: pointer;
  border: none;
  margin-right: -1px; /* 相邻边框重叠，视觉上像整体 */
  color: #333;
  transition: all 0.3s ease;
  font-weight: bold;
  border-radius: 8px;
}
.tab-container > button.active {
  background-color: #00b38a; /* 选中的高亮颜色，可根据需求调整 */
  color: #fff;
  border-color: #00b38a;
}

.approval-item {
  flex-direction: column;
  width: 97%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 2px solid white;
  border-radius: 18px;
  margin-bottom: 8px;
  background-color: white;
}
.status{
  margin-right: 8px;
  border: 2px solid black;
  border-radius: 1px;
  font-weight: bold;
}
.approval-list-container{
  width: 100%;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
}
.pass{
  width: 50px;
  background-color: #28a745;
  color: white;
  padding: 2px 6px;
  border-radius: 10px 2px 10px 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-right: 270px;
}
.nopass{
  width: 50px;
  background-color: red;
  color: white;
  padding: 2px 6px;
  border-radius: 10px 2px 10px 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-right: 270px;
}
</style>